<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{width: 80px; height: 40px; font-size: 20px;}
			#div1 div{ width:250px; height:250px; border:1px #000 solid; display:none;}
			input.active{ background:red; color: white;}
		</style>
	</head>
	<body>
		<div id="div1">
		    <input class="active" type="button" value="按钮1">
		    <input type="button" value="按钮2">
		    <input type="button" value="按钮3">
		    <div style="display:block">111111111111</div>
		    <div>22222222222</div>
		    <div>33333333333</div>
		</div>
	</body>
	<script>
		window.onload = function(){
    	var t1 = new Tab();
    	t1.init();
	};
 
		function Tab(){
		    this.oParent = document.getElementById('div1');
		    this.aInput = this.oParent.getElementsByTagName('input');
		    this.aDiv = this.oParent.getElementsByTagName('div');
		}
		 
		Tab.prototype.init = function(){
		    var This = this;
		    for(var i=0;i<this.aInput.length;i++){
		        This.aInput[i].index = i;
		        This.aInput[i].onclick = function(){
		            This.change(this);
		        };
		    }
		};
		 
		Tab.prototype.change = function(obj){
		    for(var i=0;i<this.aInput.length;i++){
		        this.aInput[i].className = '';
		        this.aDiv[i].style.display = 'none';
		    }
		    obj.className = 'active';
		    this.aDiv[obj.index].style.display = 'block';
		};
	</script>
</html>
